<template>
	<view class="default-item-box" @click.stop="clickItem">
		<view class="default-item">
			<view class="default-item__head">
				<view class="default-item__head--left" @click="goHomePage">
					<view class="default-item__head--left-avator">
						<n-avator width="40" height="40" circle :name="obj.CreateUser" :avator="obj.avator"></n-avator>
					</view>
					<view class="default-item__head--left-name">
						<text class="default-item__head--left-name-text">{{obj.CreateUser}}</text>
					</view>
				</view>
				<view class="default-item__head--right">
					<text>{{obj.CreateTime}}</text>
					<text style="margin: 0 10rpx;">·</text>
					<text>{{obj.BlockName}}</text>
				</view>
			</view>
			<view class="default-item__body">
				<view class="default-item__body--title">
					<text class="default-item__body--title-text">{{obj.SubjectTitle}}</text>
				</view>
				<view class="default-item__body--content">
					<text class="default-item__body--content-text">{{obj.CoverContent}}</text>
				</view>
				<view class="default-item__body--pic">
					<c-search-image :images="obj.images" :covers="obj.covers" :type="type" @preview="preview"></c-search-image>
				</view>
				<view class="default-item__body--bottom">
					<view class="default-item__body--bottom-tag">
						<view class="default-item__body--bottom-tag-box" v-if="obj.TagNames.length">
							<text class="default-item__body--bottom-tag-box-text">{{obj.TagNames[0]}}</text>
						</view>
					</view>
					<view class="default-item__body--bottom-info" v-if="type != 'edit'">
						<view class="default-item__body--bottom-info__item">
							<image class="default-item__body--bottom-info__item--icon" src="@/static/theme/default/community/list-view.png" mode=""></image>
							<text class="default-item__body--bottom-info__item--text">{{obj.ViewCount}}</text>
						</view>
						<view class="default-item__body--bottom-info__item"  @click.stop="scrollToUpper">
							<image class="default-item__body--bottom-info__item--icon" src="@/static/theme/default/community/list-reply.png" mode=""></image>
							<text class="default-item__body--bottom-info__item--text">{{obj.ReplyCount}}</text>
						</view>
						<like :value="obj.LikesCount" :isLike="obj.isLike" @change="likeChange"></like>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import Like from './like.nvue'
	import { formatImg,timestampFormat,entitiestoUtf16 } from '@/common/custom_util.js';
	import nAvator from '@/components/custom/avator/n-avator.nvue'
	import cSearchImage from './c-search-image.vue'
	
	export default {
		components: {
			nAvator,Like,cSearchImage
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				obj: {},
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			showFollow: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: ''
			},
		},
		watch: {
			data: {
				immediate: true,
				deep: true,
				handler() {
					let data = JSON.parse(JSON.stringify(this.data));
					data.SubjectTitle = entitiestoUtf16(data.SubjectTitle)
					data.CreateTime = timestampFormat(data.CreateTime);
					data.CoverContent = entitiestoUtf16(data.CoverContent)
					data.avator = this.static_avator + "/static/photo/user/" + data.CreatePxid + "/70.jpg";
					if(data.CoverImages) {
						let coverImages = data.CoverImages.split('|');
						let covers = [];
						for (let i = 0; i < coverImages.length; i++) {
							let item = coverImages[i].split(',')
							covers.push({
								src: formatImg(item[0],false),
								width: item[1]*1,
								height: item[2]*1,
							})
						}
						data.CoverImages = covers;
					} else {
						data.CoverImages = [];
					}
					if(data.SubjectImages) {
						let temp = data.SubjectImages.split('|');
						let images = [];
						let covers = [];
						for (let i = 0; i < temp.length; i++) {
							let item = temp[i];
							let img = item.split(',');
							let src = formatImg(img[0],false);
							let width = img[1]*1;
							let height = img[2]*1;
							images.push({
								src: src.replace('_minPic',''),
								width,
								height,
							})
							if(width < 200 || height < 200 || covers.length >= 3) continue
							covers.push({
								src,
								width,
								height,
							})
						}
						data.images = images;
						data.covers = covers;
					} else {
						data.SubjectImages = [];
						data.covers = [];
					}
					data.covers = data.CoverImages.length ? data.CoverImages : data.covers;
					data.images = data.images ? data.images : [];
					data.TagNames = data.TagNames ? data.TagNames.split('|') : [];
					data.isLike = data.MyLikesCount == '0' ? false : true;
					this.obj = data;
				}
			}
		},
		created() {
			
		},
		methods: {
			/**
			 * 创建主题点赞
			 */
			addTopicLikes(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicLikes',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 修改社区帖子阅读量
			 */
			updateSubjectViewCountById() {
				let that = this;
				_custom.getDataJava({
					apiname: 'updateSubjectViewCountById',
					code: 2,
					apiparam: {
						subjectid: this.data.Id
					},
				})
			},
			/**
			 * 点赞
			 * @param {Object} v
			 */
			likeChange(v) {
				this.addTopicLikes({
					topicid: this.data.TopicId,
					topicrouter: '/pages/community/subject-view',
					businessid: this.data.Id,
					owner: this.data.CreateUser,
					ownerpxid: this.data.CreatePxid,
					replyid: '',//直接点赞业务时不用传
					createuser: this.obsusername,
					createpxid: this.pxid,
					flag: v.isLike ? 0 : 1,
				})
				this.obj.LikesCount = v.value;
				this.obj.isLike = v.isLike;
			},
			/**
			 * 点击item
			 */
			clickItem(e) {
				// #ifdef APP-NVUE
				e.stopPropagation();
				// #endif
				uni.$emit('clickSearchItem',this.obj);
			},
			preview() {
				this.updateSubjectViewCountById();
			},
			/**
			 * 滚动到评论区
			 */
			scrollToUpper(e) {
				// #ifdef APP-NVUE
				e.stopPropagation();
				// #endif
				uni.$emit('searchScrollToUpper',this.obj);
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(e) {
				// #ifdef APP-NVUE
				e.stopPropagation();
				// #endif
				uni.$emit('goHomePage',{
					name: this.obj.CreateUser,
					pxid: this.obj.CreatePxid,
					avator: this.obj.avator,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.default-item-box {
		background-color: #eee;
	}
	
	.default-item {
		border-radius: 15rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 0 10rpx;
		
		&__head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 100rpx;
			
			&--left {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 400rpx;
				
				&-avator {
					justify-content: center;
					align-items: center;
				}
				
				&-name {
					margin-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;  
					white-space: nowrap;
					
					&-text {
						font-size: 25rpx;
						line-height: 50rpx;
						font-weight: bold;
					}
				}
			}
			
			&--right {
				display: flex;
				flex-direction: row;
				align-items: center;
				
				text {
					font-size: 25rpx;
					color: #aaa;
				}
			}
		}
		
		&__body {
			
			&--title {
				
				&-text {
					font-size: 36rpx;
					lines: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 70rpx;
					color: #1d1d1d;
				}
			}
			
			&--content {
				/* #ifdef H5 */
				font-size: 33rpx;
				color: #aaa;
				overflow: hidden;
				text-overflow: ellipsis;  
				white-space: nowrap;
				display:-webkit-box; //作为弹性伸缩盒子模型显示。
				-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
				-webkit-line-clamp:2; //显示的行
				/* #endif */
				
				&-text {
					font-size: 33rpx;
					color: #818181;
					overflow: hidden;
					text-overflow: ellipsis;  
					lines: 2;
					line-height: 55rpx;
				}
			}
			
			&--pic {
				margin: 20rpx 0;
				
				&-item {
					border-radius: 20rpx;
				}
			}
			
			&--bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				&-tag {
					
					&-box {
						padding: 10rpx 20rpx;
						background-color: #F0F1F5;
						border-radius: 10rpx;
						
						&-text {
							font-size: 25rpx;
							color: #aaa;
						}
					}
					
				}
				
				&-info {
					width: 300rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding-right: 10rpx;
					
					&__item {
						display: flex;
						flex-direction: row;
						align-items: center;
						
						&--icon {
							width: 40rpx;
							height: 30rpx;
						}
						
						&--text {
							font-size: 29rpx;
							color: #aaa;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
	
	.is-attent {
		border-color: #bfbfbf;
	}
</style>
